<template>
	<view>
		<view class="top flex">
			<image :src="info.image" mode="aspectFill" v-if="info.image"></image>
			<image :src="webconfigImg" mode="aspectFill" v-else></image>
			<view class="f_r">
				<view class="name u-line-2">{{ info.name }}</view>
				<view class="price" v-if="optionObj.maxBuyerPrice">
					<text class="y">最高出价：</text>
					<text
						class="p"
						:class="{
							p1: getPriceLength(optionObj.maxBuyerPrice) < 6,
							p2: getPriceLength(optionObj.maxBuyerPrice) == 6,
							p3: getPriceLength(optionObj.maxBuyerPrice) == 7,
							p4: getPriceLength(optionObj.maxBuyerPrice) == 8,
							p5: getPriceLength(optionObj.maxBuyerPrice) >= 9
						}"
					>
						{{ $numToLocaleString(optionObj.maxBuyerPrice) }}
					</text>
					<text class="y" style="margin-left: 10rpx;">{{ optionObj.priceUnit == 0 ? 'MHB' : '元' }}</text>
				</view>
				<view class="ts" v-else>{{ info.priceUnit == 0 ? 'MHB' : '元' }}：-</view>
			</view>
		</view>

		<view class="main">
			<view class="title u-flex u-col-center u-row-between">
				<view class="tl">联系信息</view>
				<view class="tr u-flex u-col-center u-row-right" @click="$pageTo('/pages/user/addressList?types=release')">
					<text>切换/选择</text>
					<image src="../../static/qh.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="list" v-if="params.gameZoneName">
				<view class="item u-flex u-col-top u-row-between">
					<view class="l">大区名称</view>
					<view class="r">
						{{ params.gameZoneName }}
					</view>
				</view>
				<view class="item u-flex u-col-top u-row-between">
					<view class="l">游戏ID</view>
					<view class="r">
						{{ params.account }}
					</view>
				</view>
				<view class="item u-flex u-col-top u-row-between">
					<view class="l">微信号/手机号</view>
					<view class="r">
						{{ params.wechat }}
					</view>
				</view>
			</view>
		</view>

		<view class="inputs">
			<view class="title">
				价格
				<span>({{ info.priceUnit == 0 ? 'MHB' : '元' }})</span>
			</view>
			<view class="in">
				<input v-model="params.price" type="number" maxlength="9" placeholder-class="pclass1" placeholder="请输入" />
			</view>
		</view>

		<view class="" style="height: 200rpx"></view>
		<view class="footer_btn">
			<view class="cont">
				<view class="btn" @click="handleCHUJIA">出价</view>
			</view>
		</view>
	</view>
</template>

<script>
import { accountList, quotationBuyer, searchinfo,} from '@/common/http.api.js';
export default {
	data() {
		return {
			webconfigImg: uni.getStorageSync('webconfig').productDefaultImage,
			params: {
				id: undefined,
				price: undefined,
				gameZoneName: undefined,
				account: undefined,
				wechat: undefined
			},
			info: {},
			optionObj:{}
		};
	},
	computed: {
		getPriceLength() {
			return (data) => {
				if (!data) return 1;
	
				function getDigitCount(num) {
					if (num === 0) return 1;
	
					num = Math.abs(parseInt(num)); // 忽略小数部分，只处理整数
					return Math.floor(Math.log10(num)) + 1;
				}
				let l = getDigitCount(data);
				return l;
			};
		}
	},
	onLoad(option) {
		// 两种情况 重新出价和第一次出价
		let obj =  JSON.parse(decodeURIComponent(option.obj));
		this.optionObj = obj
		this.params.id = obj.quotationId ?? obj.id
		searchinfo(obj.quotationId ?? obj.id).then((res) => {
			if (res.code == 200) {
				this.info = res.data;
			}
		});
	},
	onShow() {
		if (this.optionObj.quotationId) {
			this.params.gameZoneName = this.optionObj.gameZoneName;
			this.params.account = this.optionObj.account;
			this.params.wechat = this.optionObj.wechat;
			this.params.price = this.optionObj.price;
		}
		if (uni.getStorageSync('addressData')) {
			let addressData = uni.getStorageSync('addressData');
			this.params.gameZoneName = addressData.gameZoneName;
			this.params.account = addressData.account;
			this.params.wechat = addressData.wechat;
		} else {
			this.getlist();
		}
	},
	onUnload() {
		uni.removeStorageSync('addressData');
		uni.removeStorageSync('price');
	},
	methods: {
		handleCHUJIA() {
			if (!this.params.gameZoneName) {
				this.$modal.msg('请选择游戏区服');
				return;
			}
			if (!this.params.price) {
				this.$modal.msg('请输入价格');
				return;
			}
			this.$throttling(() => {
				quotationBuyer(this.params).then((res) => {
					if (res.code == 200) {
						this.$modal.msg('已出价');
						setTimeout(() => {
							uni.navigateBack();
						}, 500);
					}
				});
			});
		},
		getlist() {
			accountList({
				page: 1
			}).then((res) => {
				if (res.code == 200) {
					let list = res.data.list;
					let index = list.findIndex((item) => item.isDefault == 1);
					if (index > -1) {
						let addressData = list[index];
						this.params.gameZoneName = addressData.gameZoneName;
						this.params.account = addressData.account;
						this.params.wechat = addressData.wechat;
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
$color: #ff6f07;
.top {
	width: 710rpx;
	height: 200rpx;
	background: #ffffff;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	padding: 20rpx;
	box-sizing: border-box;
	margin: 20rpx auto;
	image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 20rpx;
		display: block;
	}
	.f_r {
		margin-left: 20rpx;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 160rpx;
		.name {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 30rpx;
			color: #11192d;
		}
		.ts {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 20rpx;
			color: #979797;
		}
		.price {
			.p {
				font-family: 'DIN';
				font-weight: bold;
				font-size: 28rpx;
				text-align: left;
			}
		
			.p5 {
				color: #ff70a4;
			}
		
			.p4 {
				color: #840ffb;
			}
		
			.p3 {
				color: #fe1515;
			}
		
			.p2 {
				color: #1ec742;
			}
		
			.p1 {
				color: #11192d;
			}
		
			.y {
				color: #979797;
				font-size: 20rpx;
				font-weight: 400;
			}
		}
	}
}

.main {
	background-color: #fff;
	padding: 20rpx;
	border-radius: 20rpx;
	width: 710rpx;
	box-sizing: border-box;
	margin: 20rpx auto;
	.list {
		margin-top: 20rpx;
		.item {
			padding: 10rpx 0;

			.l {
				height: 40rpx;
				line-height: 40rpx;
				font-size: 28rpx;
				color: #979797;
				text {
					font-size: 20rpx;
					margin-left: 10rpx;
				}
			}

			.r {
				flex: 1;
				width: 1rpx;
				text-align: right;
				line-height: 40rpx;
				color: #11192d;
				font-size: 28rpx;

				image {
					width: 80rpx;
					height: 80rpx;
					border-radius: 12rpx;
					overflow: hidden;
				}

				.pa {
					text-align: right;

					.p {
						font-family: 'DIN';
						font-weight: bold;
						font-size: 36rpx;
						text-align: right;
					}

					.p5 {
						color: #ff70a4;
					}

					.p4 {
						color: #840ffb;
					}

					.p3 {
						color: #fe1515;
					}

					.p2 {
						color: #1ec742;
					}

					.p1 {
						color: #11192d;
					}
				}

				.pb {
					line-height: 30rpx;
					height: 30rpx;
					font-size: 20rpx;
					color: #979797;
				}
			}
		}
	}

	.title {
		height: 40rpx;
		line-height: 40rpx;

		.tl {
			font-size: 32rpx;
			color: #11192d;
		}

		.tr {
			text {
				font-size: 28rpx;
				color: $color;
			}

			image {
				width: 28rpx;
				height: 28rpx;
			}
		}
	}
}
.inputs {
	width: 710rpx;
	height: 160rpx;
	background: #ffffff;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	padding: 20rpx;
	box-sizing: border-box;
	margin: 20rpx auto;
	.title {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #11192d;
		span {
			font-size: 20rpx;
		}
	}
	.in {
		margin-top: 25rpx;
		input {
			font-size: 28rpx;
		}
	}
}
</style>
